[tips] CalipsoにTinyMCEを組込んだあと新規投稿ができない状態を回避する方法

今日は小ネタです

表題の通りTinyMCEを組み込んだ後に新規投稿を行うと下記のエラー An invalid form control with name='content[content]' is not focusable. が発生して、コンテンツが登録できない状況に陥りました。ちなみに既存コンテンツの場合は編集後の保存でも問題ありません。これを回避するにはHTMLを修正する必要があります。

修正したHTMLは/Library/WebServer/Documents/MySite/themes/downloaded/calipso/templates/default/scripts.htmlです

/Library/WebServer/Documents/MySiteまでのパスは適宜インストールした環境に合わせて変えてください。

原因は何か？

Chromeでrequired付きinputがhiddenだと落ちるそうです。。。 ということで、12行目〜28行目の回避コードをHTMLに追加して対策完了です。

<!--  JQuery -->
<script src="/js/jquery-1.8.3.min.js"></script>

<!--  Prettify -->
<script src="/js/prettify/prettify.js"></script>

<!--  jsTree menu -->
<!-- <script src="/js/jsTree/jquery.jstree.js"></script> -->

<script src="/js/cleanslate-core.js"></script>

<!-- chrome does not work issue resolved --->
<script type="text/javascript">
$('input#submit').click(function(){
    $('textarea[required="required"]').each(function(){
        var ele = $(this);
        if (ele.is(':hidden')) {
            ele.removeAttr('required');
        }
    });
    $('input[required="required"]').each(function(){
        var ele = $(this);
        if (ele.is(':hidden')) {
            ele.removeAttr('required');
        }
    });
});
</script>

<!--  START OF DYNAMIC INSERTION -->
<%- scripts %>
<!--  END OF DYNAMIC INSERTION -->

<script>
    $(function () {

        // Navigation
        $('.primary-menu').jstree({
            "themes":{
                "theme":"default",
                "dots":false,
                "icons":false
            },
            "plugins":[ "themes", "html_data" ]
        });

        // Pretty printing
        prettyPrint();

        $('.content-block').dblclick(function () {
            if (this.id) {
                location.href = "/content/edit/" + this.id + "?returnTo=<%= request.url %>";
            }
        });

    });
</script>